<template>
  <el-card class="mt-4">
    <template #header>
      <div class="card-header">
        <span>大屏信息化管理</span>
      </div>
    </template>

    <el-form :model="websiteInfo" v-loading="loading">
      <el-form-item label="微信二维码">
        <el-input v-model="websiteInfo.wechatCode" />
      </el-form-item>
      <el-form-item label="微信二维码链接上传">
        <el-upload
          :file-list="formData.fileList!"
          :action="action"
          :headers="{ Authorization: 'Bearer ' + userStore.token }"
          list-type="picture-card"
          @change="handleChange"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="websiteInfo.email" />
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="websiteInfo.phone" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="updateWebsite"
          >更新信息</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import {
  ElMessage,
  UploadUserFile,
  UploadFile,
  UploadFiles,
} from "element-plus";
import Api from "@/api/website";
import { website } from "@/types";
import { useUserStore } from "@/store/user";

const userStore = useUserStore();
const action = import.meta.env.VITE_API_URL + "/upload/file";
const formData = reactive<{
  fileList: UploadUserFile[];
}>({
  fileList: [],
});
const loading = ref(false);
const websiteInfo = reactive<Partial<website>>({});
const getWebsiteInfo = async () => {
  loading.value = true;

  try {
    const res = await Api.getWebsiteInfo();
    if (res) {
      Object.assign(websiteInfo, res);
      formData.fileList = res.wechatCodeUrl
        ?.split(",")
        ?.map((url: string) => ({ url })) as any;
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleChange = (file: UploadFile, fileList: UploadFiles) => {
  console.log("上传图片", file, fileList);
  websiteInfo.wechatCodeUrl = fileList
    .map((file) => (file.response as any)?.url)
    .join(",");
};
// 更新个人信息
const updateWebsite = async () => {
  loading.value = true;
  // 这里应该调用API更新网站信息
  try {
    const res = await Api.updateWebsiteInfo(websiteInfo);
    if (res) {
      await getWebsiteInfo();
      ElMessage.success("大屏信息更新成功！！");
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getWebsiteInfo();
});
</script>

<style scoped lang="scss"></style>
